<template>
  <div class="work-banner-box">
    <span class="banner-cn">{{bannerText}}</span>
    <span class="banner-en">{{bannerEn}}</span>
    <span class="banner-line"></span>
  </div>
</template>

<script>
  export default {
    props: {
      bannerText: {
        type: String,
        default: ""
      },
      bannerEn: {
        type: String,
        default: ""
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/mixin";

  .work-banner-box {
    .fj(center, center);
    flex-direction: column;
    .wh(100%, 240px);
    .bg-image("../images/f_banner.png");
    .banner-cn {
      .size-color(30px, #FFF)
    }
    .banner-en {
      padding-top: 9px;
      padding-bottom: 15px;
      .size-color(14px, #FFF);
    }
    .banner-line {
      .wh(40px, 4px);
      background: #FFF;
    }
  }
</style>
